<template>
  <div class="new-prediction-overview-page">
    <!-- 通用导航栏 -->
    <CommonNavBar pageTitle="AI智能预测中心" />
    
    <!-- 动态电流背景 -->
    <div class="electric-background">
      <div class="electric-line horizontal" v-for="i in 8" :key="'h' + i" :style="{ top: (i * 12.5) + '%', animationDelay: (i * 0.2) + 's' }"></div>
      <div class="electric-line vertical" v-for="i in 12" :key="'v' + i" :style="{ left: (i * 8.33) + '%', animationDelay: (i * 0.15) + 's' }"></div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="page-content">
      <div class="module-container">
        <NewPredictionOverview />
      </div>
    </div>
  </div>
</template>

<script>
import NewPredictionOverview from '@/components/prediction/NewPredictionOverview'
import CommonNavBar from '@/components/CommonNavBar'

export default {
  name: 'NewPredictionOverviewPage',
  components: {
    NewPredictionOverview,
    CommonNavBar
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      console.log('AI智能预测中心页面加载完成')
    }
  }
}
</script>

<style lang="less" scoped>
.new-prediction-overview-page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #0f1b2a 100%);
  padding: 20px;
  padding-top: 100px; // 为导航栏留出空间
  box-sizing: border-box;
  position: relative;
  
  // 动态电流背景
  .electric-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 1;
    
    .electric-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, #75deef, transparent);
      box-shadow: 0 0 10px #75deef;
      
      &.horizontal {
        width: 100%;
        height: 2px;
        animation: electricFlowH 3s ease-in-out infinite;
      }
      
      &.vertical {
        width: 2px;
        height: 100%;
        animation: electricFlowV 4s ease-in-out infinite;
      }
    }
  }
  
  .page-content {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    
    .module-container {
      width: 100%;
      background: rgba(7, 19, 50, 0.6);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 20px;
      position: relative;
      backdrop-filter: blur(10px);
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #75deef, #4ecdc4);
        border-radius: 12px 12px 0 0;
      }
    }
  }
}

// 电流流动动画
@keyframes electricFlowH {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes electricFlowV {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .new-prediction-overview-page {
    padding-top: 90px;
  }
}

@media (max-width: 768px) {
  .new-prediction-overview-page {
    padding: 15px;
    padding-top: 80px;
  }
}
</style>